import { Message } from "@arco-design/web-react";
import { useState } from "react";
import { HopetoTable, IColumn } from ".";

const initialData = [
  {
    key: "1",
    name: "Jane Doe",
    salary: 23000,
    address: "32 Park Road, London",
    email: "jane.doe@example.com",
  },
  {
    key: "2",
    name: "Alisa Ross",
    salary: 25000,
    address: "35 Park Road, London",
    email: "alisa.ross@example.com",
  },
  {
    key: "3",
    name: "Kevin Sandra",
    salary: 22000,
    address: "31 Park Road, London",
    email: "kevin.sandra@example.com",
  },
  {
    key: "4",
    name: "Ed Hellen",
    salary: 17000,
    address: "42 Park Road, London",
    email: "ed.hellen@example.com",
  },
  {
    key: "5",
    name: "William Smith",
    salary: 27000,
    address: "62 Park Road, London",
    email: "william.smith@example.com",
  },
  {
    key: "12",
    name: "Jane Doe",
    salary: 23000,
    address: "32 Park Road, London",
    email: "jane.doe@example.com",
  },
  {
    key: "22",
    name: "Alisa Ross",
    salary: 25000,
    address: "35 Park Road, London",
    email: "alisa.ross@example.com",
  },
  {
    key: "32",
    name: "Kevin Sandra",
    salary: 22000,
    address: "31 Park Road, London",
    email: "kevin.sandra@example.com",
  },
  {
    key: "42",
    name: "Ed Hellen",
    salary: 17000,
    address: "42 Park Road, London",
    email: "ed.hellen@example.com",
  },
  {
    key: "52",
    name: "William Smith",
    salary: 27000,
    address: "62 Park Road, London",
    email: "william.smith@example.com",
  },
  {
    key: "11",
    name: "Jane Doe",
    salary: 23000,
    address: "32 Park Road, London",
    email: "jane.doe@example.com",
  },
  {
    key: "21",
    name: "Alisa Ross",
    salary: 25000,
    address: "35 Park Road, London",
    email: "alisa.ross@example.com",
  },
  {
    key: "31",
    name: "Kevin Sandra",
    salary: 22000,
    address: "31 Park Road, London",
    email: "kevin.sandra@example.com",
  },
  {
    key: "41",
    name: "Ed Hellen",
    salary: 17000,
    address: "42 Park Road, London",
    email: "ed.hellen@example.com",
  },
  {
    key: "51",
    name: "William Smith",
    salary: 27000,
    address: "62 Park Road, London",
    email: "william.smith@example.com",
  },
];
const columns: IColumn[] = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name1",
    editable: true,
  },
  {
    title: "Name",
    dataIndex: "name",
  },
  {
    title: "Salary",
    dataIndex: "salary",
    width: 200,
    editable: true,
  },
  {
    title: "Address",
    dataIndex: "address",
    extra: () => {
      return "22";
    },
    extraColor: "red",
  },
  {
    title: "Email",
    dataIndex: "email",
    extraPlacement: "topRight",
    extra: () => {
      return "33";
    },
  },
];

const HopetoTableDemo = () => {
  const [data, setData] = useState(initialData);
  return (
    <HopetoTable
      columns={columns}
      data={data}
      onCellEditChange={(rowIndex, rowKey, val) => {
        Message.info(`rowIndex: ${rowIndex}, rowKey: ${rowKey}, val: ${val}`);
        setData((prev) =>
          prev.map((d, idx) => {
            if (idx === rowIndex) {
              return {
                ...d,
                [rowKey]: val,
              };
            }
            return d;
          })
        );
      }}
    />
  );
};

const data2 = initialData.slice(0, 5);

const columns2: IColumn[] = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name1",
  },
  {
    title: "Name",
    dataIndex: "name",
  },
  {
    title: "Salary",
    dataIndex: "salary",
    width: 200,
    editable: true,
  },
  {
    title: "Address",
    dataIndex: "address",
    extraPlacement: "topLeft",
    extra: () => {
      return "22";
    },
    extraColor: "gray",
  },
  {
    title: "Email",
    dataIndex: "email",
    extraPlacement: "bottomLeft",
    extraColor: "green",
    extra: () => {
      return "33";
    },
  },
];

const HopetoTableDemo2 = () => {
  return (
    <HopetoTable
      columns={columns2}
      data={data2}
      onCellEditChange={(rowIndex, rowKey, val) => {
        Message.info(`rowIndex: ${rowIndex}, rowKey: ${rowKey}, val: ${val}`);
      }}
    />
  );
};

const DemoPage = () => {
  return (
    <div>
      <h2>表格：更新后同步修改数据</h2>
      <HopetoTableDemo />
      <h2>表格：更新后只发送通知</h2>
      <HopetoTableDemo2 />
    </div>
  );
};

export { HopetoTableDemo, HopetoTableDemo2 };

export default DemoPage;
